<template>
  <div :id="pieChart" style="width:100%;height: 100%;"></div>
</template>
<script>
import echarts from "echarts";
import actionurl from "../../assets/js/actionurl";

export default {
  name: "pieChart",
  props: {
    chartDataObj: {
      type: Object
    },
    pieChart: {
      type: String
    }
  },
  data() {
    return {
      chartPieData: [],
      chartPieName: [],
      option: {
        title: {
          text: "",
          subtext: "",
          x: "center"
        },
        label: {
          normal: {
            formatter: "{b|{b}：} {per|{d}%}  ",

            rich: {
              per: {
                fontSize: 14,

                padding: [2, 4],
                borderRadius: 2
              }
            }
          }
        },
        // tooltip: {
        //   trigger: 'item',
        //   formatter: "{a} <br/>{b} : {c} ({d}%)"
        // },
        legend: {
          orient: "horizontal",
          x: "center",
          y: "86%"
          // data: _this.chartPieName,
        },
        color: [
          "#999",
          "#9bd342",
          "#e54141",
          "#00adef",
          "#ab4cd3",
          "#d48265",
          "#91c7ae",
          "#2f4554",
          "#6e7074",
          "#c4ccd3",
          "#61a0a8",
          "#2463af"
        ],
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "60%",
            center: ["50%", "45%"],
            // data: _this.chartPieData,
            // data: [
            //   {value: 335, name: '专项资金扶持'},
            //   {value: 310, name: '税收优惠'},
            //   {value: 234, name: '民营经济政策'},
            //   {value: 135, name: '平台建设'},
            //   {value: 1548, name: '其他'}
            // ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    init() {
      var _this = this;
      const pieChart = echarts.init(document.getElementById(_this.pieChart));
      pieChart.setOption(_this.option);
      pieChart.setOption({
        legend: {
          data: _this.chartDataObj.Name
        },
        series: [
          {
            data: _this.chartDataObj.Data
          }
        ]
      });
      window.addEventListener("resize", function() {
        pieChart.resize();
      });
    }
    // getChartData() {
    //   var _this = this;
    //   actionurl.ChartData({}, function(re) {
    //     if (re.status == "0") {
    //       _this.chartPieData = re.data;

    //       _this.getChartName();
    //       _this.init();
    //     }
    //   });
    // },chartDataObj1
    // getChartName() {
    //   for (var i = 0; i < this.chartPieData.length; i++) {
    //     this.chartPieName.push(this.chartPieData[i].name);
    //   }
    // }
  },
  watch: {
    chartDataObj: {
      handler(newValue, oldValue) {
        console.log(newValue);

        this.init();
      }
      //   deep: true
    }
  },
  mounted() {
    this.init();
  },
  created() {
    // this.getChartData();
  }
};
</script>
